// 重置样式
* {
  box-sizing: border-box;
  outline: none;
}
html {
  font-size: 13px;
}
body {
  padding: 0;
  margin: 0;
  font-family: Arial Helvetica sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.2em;
  background: #f1f1f1;
}
a {
  color: #999;
}
p {
  line-height: 1.5em;
}

// 引入变量
@import "./variables";

// 颜色工具类
@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color;
  }
  .bg-#{$colorKey} {
    background-color: $color;
  }
}

// 文本对齐工具类
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var !important;
  }
}

// 文本字体工具类
@each $sizeKey, $size in $font-sizes {
  .fs-#{$sizeKey} {
    font-size: $size * $base-font-size;
  }
}
.text-ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// white height
.w-100 {
  width: 100%;
}
.h-100 {
  height: 100%;
}
// flex
.d-flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1;
}

// 主轴对齐工具类
@each $jc-key, $jc-value in $flex-jc {
  .jc-#{$jc-key} {
    justify-content: $jc-value;
  }
}

// 侧轴对齐工具类
@each $ai-key, $ai-value in $flex-ai {
  .ai-#{$ai-key} {
    align-items: $ai-value;
  }
}

// 边距工具类
@each $space-type-key, $space-type-value in $space-type {
  @each $space-size-key, $space-size-value in $space-size {
    // m-0 {margin:0}
    .#{$space-type-key}-#{$space-size-key} {
      #{$space-type-value}: $space-size-value * $base-space-size;
    }
  }

  @each $space-size-key, $space-size-value in $space-size {
    // mx-0 {margin-left:0;margin-right: 0;}
    .#{$space-type-key}x-#{$space-size-key} {
      #{$space-type-value}-left: $space-size-value * $base-space-size;
      #{$space-type-value}-right: $space-size-value * $base-space-size;
    }
    .#{$space-type-key}y-#{$space-size-key} {
      #{$space-type-value}-top: $space-size-value * $base-space-size;
      #{$space-type-value}-bottom: $space-size-value * $base-space-size;
    }
  }

  @each $space-directionsL-key, $space-directionsL-value in $space-directionsL {
    @each $space-size-key, $space-size-value in $space-size {
      // ml-0 {margin-left: 0}
      .#{$space-type-key}#{$space-directionsL-key}-#{$space-size-key} {
        #{$space-type-value}-#{$space-directionsL-value}: $space-size-value *
          $base-space-size;
      }
    }
  }
}

// 按钮
.btn {
  border: none;
  border-radius: 0.153846rem /* 2/13 */;
  font-size: map-get($font-sizes, "sm") * $base-font-size;
  padding: 0.2rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  &.btn-lg {
    background: map-get($colors, "white-1");
    border: 1px solid map-get($colors, "white-2");
    padding: 0.5rem 0.8rem;
    font-size: 1rem;
    i {
      color: map-get($colors, "primary");
      font-weight: bold;
      font-size: 1.5rem;
      margin-right: 0.5rem;
    }
  }
}

// nav
.nav {
  display: flex;
  .nav-item {
    border-bottom: 3px solid transparent;
    padding-bottom: 0.2rem;
    &.active {
      color: map-get($colors, "primary");
      border-bottom-color: map-get($colors, "primary");
    }
  }
  &.nav-inverse {
    .nav-item {
      border-bottom: 3px solid transparent;
      padding-bottom: 0.2rem;
      color: map-get($colors, "white");
      &.active {
        border-bottom-color: map-get($colors, "white");
      }
    }
  }
}
